<script lang="ts" setup name="CapitalAccount">
import {useRouter} from 'vue-router';
const router = useRouter();
const handleRightAdd=()=>{
  router.push("/moneyDetail")
}
</script>
<template>
  <nav-header class="header" title=''>
    <template #right>
      <img @click="handleRightAdd" class="header-rigth" src="@/assets/images/icon/icon-record.png"/>
    </template>
  </nav-header>
  <div class="pay-success">
    <img  src="@/assets/images/icon/icon-pay-success.png" alt="">
    <div class="money">RS1,000.00</div>
    <div class="account">提现金额至**** **** **** 1234</div>
  </div>

  <van-cell-group>
    <van-cell title="退款金额" value="RS1,000.00" />
    <van-cell title="卡号" value="6789" />
    <van-cell title="账户" value="VISA" />
    <van-cell title="时间" value="2024.01.15 09:23 AM" />
    <van-cell title="流水号"  >
      <template #value>
        <span>
          253445343434
          <img class="icon-copy" src="@/assets/images/icon/icon-copy.png" alt="">
        </span>
      </template>
    </van-cell>
    <van-cell title="交易ID">
      <template #value>
        <span>
          253445343434
          <img class="icon-copy" src="@/assets/images/icon/icon-copy.png" alt="">
        </span>
      </template>
    </van-cell>
    <!--  status-red status-yellow 两种颜色可选，可以添加其他颜色   -->
    <van-cell title="状态" value="待审核" class="status-yellow" />
    <van-cell title="备注"  value="急用，快打款！急用，快打款！急用，快打款！急用，快打款！" ></van-cell>
  </van-cell-group>

  <div class="btns">
    <van-button
        class='btn-submit-in'
        type="primary"
    >
      去投资
    </van-button>
  </div>

</template>
<style lang="scss" scoped>
.header{
  .header-rigth{
    width: 10px;
    padding-right: 10px;
  }
}
.pay-success{
  margin-top: 16px;
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  img{
    width: 48px;
    margin-bottom: 10px;
  }
  .money{
    font-weight: bold;
    font-size: 15px;
    color: #2C2C2C;
    text-align: center;
  }
  .account{
    margin-top: 4px;
    font-size: 8px;
    color: #777777;
    text-align: center;
  }
}
.van-cell-group{
  padding-left: 10px;
  padding-right: 10px;
  margin-top: 20px;
  &::after{
    display: none;
  }
  :deep(.van-cell){
    padding-left: 0;
    padding-right: 0;
    &::after{
      display: none;
    }
     .van-cell__title{
       font-size: 7px;
       color: #777777;
     }
     .van-cell__value{
      font-weight: bold;
      font-size: 7px;
      color: #2C2C2C;
    }
  }

  :deep(.status-red){
    .van-cell__value{
      color: #E8464A;
    }
  }
  :deep(.status-blue){
    .van-cell__value{
      color: #1642F4;
    }
  }
  :deep(.status-green){
    .van-cell__value{
      color: #5FAB3D;
    }
  }
  :deep(.status-yellow){
    .van-cell__value{
      color: #FF9900;
    }
  }

  :deep(.icon-copy){
    width: 6px;
    padding-left: 2px;
    cursor: pointer;
  }
  .icon-certificate{
    width: 36px;
    margin-right: 2px;
    &:last-child{
      margin-right: 0;
    }
  }
}
.btns{
  display: flex;
  margin: 20px 10px 10px 10px;
  padding-bottom: 10px;
  .btn-submit-in{
    flex: 1;

    border-radius: 100px;
    background: #1642F4;
    font-size: 8px;
    border: none;
    line-height: 1;
  }
}
</style>
